<template>
    <div>
        <ModalDialog title="登录">
            <div>
              <div class="item">
                 <input type="text" placeholder="请输入手机号" class="input">
              </div>
              <div class="item">
                 <input type="text" placeholder="请输入密码" class="input">
              </div>
              <div class="item">
                  <button class="loginBtn">登录</button>
              </div>
            </div>
        </ModalDialog>

        <modal-dialog title="个人介绍">
            <img class="headImg" src="https://img0.baidu.com/it/u=3464224756,2566048582&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=500" alt="">
        </modal-dialog>
    </div>
</template>

<script>
import ModalDialog from '@/components/ModalDialog.vue'
export default {
  components:{
    ModalDialog
  }
}
</script>

<style>
  .loginBtn{
    width: 250px;
    height: 37px;
    background-color:#007CB7;
    border: none;
    border-radius: 5px;
    text-align: center;
    line-height: 37px;
    color: white;
  }
  .item{
    line-height: 50px;
  }
  .input{
    width: 250px;
    height: 35px;
    border-radius: 5px;
  }
  .headImg{
    width: 300px;
  }
</style>